<template>
  <div class="layout">
    <div class="article">
      <div style="height: 20px;">
        <ButtonGroup style="float: right;margin-right: 10px">
          <Button icon="ios-print-outline" type="dashed" @click="handelPrint"></Button>
          <Button icon="ios-share-outline" type="dashed" @click="handleShare">分享</Button>
        </ButtonGroup>
      </div>
      <Divider/>
      <div  id="article_content">
        <h2>{{ data?.title }}</h2>
        <div style="margin: 40px 0" v-html="data?.content"></div>
      </div>
      <BackTop :height="50" :bottom="50" :right="50">
        <div class="to-top">
          <Icon color="black" type="md-arrow-round-up"/>
        </div>
      </BackTop>
    </div>

    <Footer/>
  </div>
</template>
<script>
import printJS from 'print-js'
import { getDetail } from '../../api/article'
import Footer from '@/components/Footer.vue'

export default {
  name: 'Article',
  props: ['id'],
  components: { Footer },
  data() {
    return {
      data: {},
    }
  },
  created() {
    this.getArticleDetail()
  },
  watch: {
    // eslint-disable-next-line no-unused-vars
    $route(to, from) {
      if (this.$route.name === 'Article') {
        this.getArticleDetail()
      }
    }
  },
  methods: {
    getArticleDetail() {
      getDetail({ id: this.$route.params.id }).then((res) => {
        this.data = res.data
      }).catch(() => {
        this.$router.back()
      })
    },
    handleShare() {
      this.$Copy({
        text: window.location.href,
        success: () => {
        },
        error: () => {
        }
      })
    },

    handelPrint() {
      try {
        printJS({
          printable: 'article_content',
          type: 'html',
          style: '@page {margin: 0 10mm};', // 不打印页眉和页脚
          honorColor: true, // 是否打印彩色文本
          targetStyles: ['*'] // 允许打印所有样式属性
        })
      } catch (error) {
        this.$Message.error('打印失败')
        console.log(error)
      }
    }

  }
}

</script>
<style scoped>
.layout {
  background: #f5f7f9;
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  margin-top: 100px;
}

.article {
  margin: auto;
  width: 65%;
  min-width: 1100px;
  background-color: white;
  border-radius: 3px;
  padding: 15px 30px;
  text-align: center;
}

.to-top {
  border-left: 1px solid rgba(110, 110, 110, 0.1);
  border-top: 1px solid rgba(110, 110, 110, 0.1);
  border-radius: 4px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
}
.to-top:hover {
  background-color: #f3f3f3;
}
</style>
